<template>
	<div class="login flex justify-between">
		<div class="flex-3 flex align-center">
			<div class="mar-l-300">
				<div class="flex">
					<img :src="settingStore.logoUrl" class="w-px-45 mar-r-20" />
					<h1 class="mainColor">{{ settingStore.systemTitle }}</h1>
				</div>

				<div class="mar-t-10">
					<h2 style="letter-spacing: 3px">Welcome</h2>
					<Lines w="45px" :h="4" :bg="mainBgColor" round animated animateClass="rubberBand" />
				</div>
			</div>
		</div>

		<div class="flex flex-1 justify-center align-center mar-r-40">
			<div class="w-100">
				<h1 class="font-bold-normal">登录</h1>

				<div class="mar-t-40">
					<div class="flex align-center mar-b-10">
						<SvgIcon name="icon-user" class="mar-r-10 font-mini"></SvgIcon>

						<el-input
							v-model="userName"
							placeholder="请输入用户名"
							size="small"
							clearable
							maxlength="20"
							class="input-border-none"
						></el-input>
					</div>

					<Lines :h="1" bg="#e6e6e6"></Lines>
				</div>

				<div class="mar-t-30">
					<div class="flex align-center mar-b-10">
						<SvgIcon name="icon-key" class="mar-r-10 font-mini"></SvgIcon>

						<el-input
							v-model="password"
							type="password"
							placeholder="请输入密码"
							size="small"
							clearable
							maxlength="20"
							class="input-border-none"
						></el-input>
					</div>

					<Lines :h="1" bg="#e6e6e6"></Lines>
				</div>

				<div class="mar-t-30">
					<div class="flex justify-between align-center mar-b-10">
						<div class="flex align-center">
							<SvgIcon name="icon-vcode" class="mar-r-10 font-mini"></SvgIcon>

							<el-input
								v-model="vcode"
								placeholder="请输入验证码"
								size="small"
								clearable
								maxlength="4"
								class="input-border-none"
								@keyup.enter="login()"
							></el-input>
						</div>

						<span>{{ code }}</span>
					</div>

					<Lines :h="1" bg="#e6e6e6"></Lines>
				</div>

				<div class="mar-t-30">
					<el-button type="primary" size="large" round @click="login()">登录</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
import SvgIcon from '@/components/SvgIcon/index.vue'
import Lines from '@/components/Lines/index.vue'
import variables from '@/assets/style/variable.module.scss'
import useSettingsStore from '@/store/settings'
import useUserStore from '@/store/user'

import { notifyPopUpMsg } from '@/utils/util'
import { storeToRefs } from 'pinia'
import { defineComponent, ref, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'

export default defineComponent({
	name: 'Login',

	components: {
		SvgIcon,
		Lines
	},

	setup() {
		const settingStore = useSettingsStore()
		const userStore = useUserStore()
		const userName = ref('')
		const password = ref('')
		const router = useRouter()

		// 验证码
		const vcode: string = ref('')
		const code: string = ref('gxF2')

		// 判断当前用户是否登录
		const checkLogin = () => {
			if (userStore.isLogin) {
				notifyPopUpMsg('warning', '您已登录！', '提示', 1000)
				router.push('/')
				return
			}
		}

		// 登录
		const login = () => {
			if (userName.value === '') {
				notifyPopUpMsg('warning', '用户名不得为空！', '提示', 3000)
				return
			}

			if (password.value === '') {
				notifyPopUpMsg('warning', '密码不得为空！', '提示', 3000)
				return
			}

			if (vcode.value === '') {
				notifyPopUpMsg('warning', '验证码不得为空！', '提示', 3000)
				return
			}

			if (vcode.value !== code.value) {
				vcode.value = ''
				notifyPopUpMsg('warning', '验证码错误！', '提示', 3000)
				return
			}

			// 将用户信息存入localstorage中
			const userInfo = JSON.stringify({
				userName: userName.value,
				password: password.value
			})

			localStorage.setItem('userInfo', userInfo)
			userStore.setLoginState(true)
			router.push('/')
		}

		onMounted(() => {
			checkLogin()
		})

		// 监听路由变化，判断当前登录状态
		watch(
			() => router.currentRoute.value.path,
			(newVal, oldVal) => {
				if (newVal === '/login') {
					checkLogin()
				}
			},
			{ immediate: false }
		)

		return {
			// 主题背景色
			mainBgColor: variables.mainBgColor,

			// 基本配置
			settingStore,

			// 用户名
			userName,

			// 密码
			password,

			// 验证码
			vcode,
			code,

			// methods
			login,
			checkLogin
		}
	}
})
</script>

<style lang="scss" scoped>
.login {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: url('../assets/images/login_bg.jpg') no-repeat;
	background-size: 100%;
}

// 去除 el-input 边框
.input-border-none {
	:deep(.el-input__wrapper) {
		box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
		// cursor: default;
		// .el-input__inner {
		// 	cursor: default !important;
		// }
	}
}
</style>
